<template>
  <div class="davGoods">
    <div class="Header"></div>
    <div v-show="flag">
      <Banner :bannerList="PageList.currentCategory.bannerList"></Banner>
      <GoodCardList :titleShowYc="titleShowYc" :goodsCategoryItemList="PageList.categoryItemList" ></GoodCardList>
    </div>
    <van-loading vertical class="loading" v-show="!flag" size="24px">加载中...</van-loading>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'HomeDavPage',
})
</script>

<script lang="ts" setup>
import Banner from "@/components/Banner/index.vue"
import GoodCardList from "@/components/GoodCardList/index.vue"
import homeApi from "@/api/homeApi"
import type { IDavPageData } from "@/api/homeApi"
import { ref, onMounted, computed } from "vue"
// 接受传递的categoryId
const props = defineProps(['categoryId'])

// 页面数据渲染
const PageList = ref<IDavPageData>({
  currentCategory: {
    id:'',
    bannerList:[]
  },
  categoryItemList:[],
  categoryList: []
})
const titleShowYc = ref(true)
const flag = ref(true)
// 发送请求获取数据
async function getPageList() {
  try {
    flag.value = false
    const res = await homeApi.getDavPageData(props.categoryId, 'pd')
    flag.value = true
    PageList.value = res.data
  } catch (error) {
    console.log('发送请求获取数据失败',error);
  }
}
onMounted(() => {
  getPageList()
})
</script>

<style lang="less" scoped>
/* 页面背景body */
.davGoods {
  background-color: rgb(238, 238, 238);

  /* 头部组件 */
  .Header {
    width: 355px;
    height: 44px;
    padding: 0 8px 0 12px;
    background-color: aquamarine;
  }
  .loading{
    width: 375px;
    height: calc(100vh - 50px);
    margin-top: 100px;
  }
}

</style>